import React,{ Component } from 'react';
import axios from 'axios'
export default class Search extends Component {
  search = () => {
    const {keyWordNode: {value: keyWord}} = this

    this.props.updataAppState({isFirst: false, isLoading: true})//发送网络请求前更新app状态

    axios.get(`/api1/search/users?q=${keyWord}`).then(
      response => {
        // this.props.saveUsers(response.data.items)//子传父(利用回调函数,父组件提供回调,子组件调用将要传递的数据作为回调函数的参数)
        // console.log(response.data)
        this.props.updataAppState({isLoading: false, users: response.data.items})
      },
      error => {
        this.props.updataAppState({isLoading: false, err: error.message})
      }
    )
  }
  render() {
    return (
      <div>
          <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
              <input ref = { c => this.keyWordNode = c} type="text" placeholder="enter the name you search"/>&nbsp;
              <button onClick = { this.search }>Search</button>
            </div>
        </section>
      </div>
    )
  }
}